<script setup>
import { RouterLink } from "vue-router";
import { ref, watch, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { useWindowsWidth } from "../../assets/js/useWindowsWidth";

// images
import ArrDark from "@/assets/img/down-arrow-dark.svg";
import downArrow from "@/assets/img/down-arrow.svg";
import DownArrWhite from "@/assets/img/down-arrow-white.svg";
import { getTiresType } from "@/api/tires";

import LOGO from "@/assets/img/LOGO.png";
const curLang = ref("english");
const route = useRouter();
const props = defineProps({
  action: {
    type: Object,
    route: String,
    color: String,
    label: String,
    default: () => ({
      route: "https://www.creative-tim.com/product/vue-material-kit",
      color: "bg-gradient-success",
      label: "Free Download",
    }),
  },
  transparent: {
    type: Boolean,
    default: false,
  },
  light: {
    type: Boolean,
    default: false,
  },
  dark: {
    type: Boolean,
    default: false,
  },
  sticky: {
    type: Boolean,
    default: false,
  },
  darkText: {
    type: Boolean,
    default: false,
  },
  isBootom: {
    type: Boolean,
    default: false,
  },
});

// set arrow  color
function getArrowColor() {
  if (props.transparent && textDark.value) {
    return ArrDark;
  } else if (props.transparent) {
    return DownArrWhite;
  } else {
    return ArrDark;
  }
}

// set text color
const getTextColor = () => {
  let color;
  if (props.transparent && textDark.value) {
    color = "text-dark";
  } else if (props.transparent) {
    color = "text-white";
  } else {
    color = "text-dark";
  }

  return color;
};
let dictArr = ref([]);
getTiresType().then((res) => {
  dictArr.value = res.data;
});
// set nav color on mobile && desktop

let textDark = ref(props.darkText);
const { type } = useWindowsWidth();
let curPath = ref("/");
const menuAllList = [
  {
    id: 1,
    name: "HOME",
    path: "/",
  },
  {
    id: 2,
    name: "ALL TIRES",
    path: "/products",
  },
  {
    id: 3,
    name: "WARRANTY",
    path: "/warranty",
  },
  {
    id: 4,
    name: "RESOURCES",
    path: "/assetsPage",
  },
  {
    id: 5,
    name: "FAQS",
    path: "/faqs",
  },
  {
    id: 6,
    name: "CONTACT US",
    path: "/contactUs",
  },
  {
    id: 7,
    name: "TIRE REGISTRATION",
    path: "https://form.jotform.co/73515467298872",
  },
];
const menuList = computed(() => {
  return menuAllList.filter((item) => item.path != curPath.value);
});
if (type.value === "mobile") {
  textDark.value = true;
} else if (type.value === "desktop" && textDark.value == false) {
  textDark.value = false;
}
function setLang(lang) {
  curLang.value = lang;
  localStorage.setItem("current_lang", lang);
  translate.changeLanguage(lang); //不跳页面直接切换语言
}

onMounted(() => {
  // googleTranslateElementInit();
  let lang = localStorage.getItem("current_lang"); //页面刷新后能获取到之前设置的语种
  curLang.value = lang;
  if (lang && translate) {
    translate.language.setDefaultTo(lang);
    translate.service.use("client.edge");
    translate.listener.start();
    translate.ignore.class.push("ignore");
    translate.execute();
  }
  curPath.value = route.currentRoute.value.path;
});
watch(
  () => type.value,
  (newValue) => {
    if (newValue === "mobile") {
      textDark.value = true;
    } else {
      textDark.value = false;
    }
  }
);
</script>
<template>
  <nav
    class="navbar navbar-expand-lg top-0 uppercase"
    :class="{
      'z-index-3 w-100 shadow-none navbar-transparent position-absolute py-3':
        props.transparent,
      'my-3 blur border-radius-lg z-index-3 py-2 shadow py-2 start-0 end-0 mx-4 position-absolute mt-4':
        props.sticky,
      'navbar-light bg-white py-3': props.light,
      ' navbar-dark bg-gradient-dark z-index-3 py-3': props.dark,
      ' enstyle': curLang != 'english',
    }"
    style="background: rgba(0, 0, 0, 0.6)"
  >
    <div
      :class="
        props.transparent || props.light || props.dark
          ? 'container'
          : 'container-fluid px-0'
      "
    >
      <a href="/"> <img :src="LOGO" alt="" class="logo show-pointer" /></a>

      <button
        class="navbar-toggler shadow-none ms-2"
        type="button"
        data-bs-toggle="collapse"
        data-bs-target="#navigation"
        aria-controls="navigation"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span class="navbar-toggler-icon mt-2">
          <span class="navbar-toggler-bar bar1"></span>
          <span class="navbar-toggler-bar bar2"></span>
          <span class="navbar-toggler-bar bar3"></span>
        </span>
      </button>
      <div
        class="collapse navbar-collapse w-100 pt-3 pb-2 py-lg-0"
        id="navigation"
      >
        <ul class="navbar-nav navbar-nav-hover ms-auto">
          <li
            v-for="(item, index) in isBootom ? menuList : menuAllList"
            :key="index"
            :class="`nav-item mx-2 ${
              item.path == '/products' ? 'dropdown dropdown-hover' : ''
            }`"
          >
            <a
              v-if="item.id != 7 && item.path != '/products'"
              :href="item.path"
              :class="`nav-link d-flex cursor-pointer align-items-center  text-f-ERASBD ${
                curPath == item.path ? 'text-red' : ''
              }`"
            >
              {{ item.name }}
            </a>
            <a
              v-else-if="item.path == '/products'"
              :href="item.path"
              :class="`nav-link d-flex cursor-pointer align-items-center  text-f-ERASBD ${
                curPath == item.path ? 'text-red' : ''
              }`"
              id="dropdownMenuPages"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              {{ item.name }}
            </a>

            <a
              v-else
              href="https://form.jotform.co/73515467298872"
              target="_blank"
              :class="`nav-link d-flex cursor-pointer align-items-center  text-f-ERASBD ${
                curPath == item.path ? 'text-red' : ''
              }`"
            >
              {{ item.name }}
            </a>
            <div
              class="dropdown-menu dropdown-menu-animation ms-n3 dropdown-md p-3 border-radius-xl mt-0 mt-lg-3"
              aria-labelledby="dropdownMenuPages"
            >
              <div>
                <RouterLink
                  v-for="(type, index) in dictArr"
                  :key="index"
                  :to="{ name: 'products', query: { posId: type.dictValue } }"
                  class="dropdown-item border-radius-md"
                >
                  <span class="text-f-Montserrat-Medium text-black">{{
                    type.dictLabel
                  }}</span>
                </RouterLink>
              </div>
            </div>
          </li>

          <li class="nav-item dropdown dropdown-hover mx-2">
            <a
              role="button"
              class="nav-link ps-2 d-flex cursor-pointer align-items-center text-f-ERASBD nav-language"
              :class="getTextColor()"
              id="dropdownMenuDocs"
              data-bs-toggle="dropdown"
              aria-expanded="false"
            >
              <span class="icon flag " :class="curLang"></span>
              <img
                :src="getArrowColor()"
                alt="down-arrow"
                class="arrow ms-2 d-lg-block d-none"
              />
              <img
                :src="getArrowColor()"
                alt="down-arrow"
                class="arrow ms-1 d-lg-none d-block ms-auto"
              />
            </a>
            <div
              class="dropdown-menu dropdown-menu-end dropdown-menu-animation dropdown-menu-animation-1 dropdown-md mt-0 mt-lg-3 p-3 border-radius-lg"
              aria-labelledby="dropdownMenuDocs"
            >
              <div class="d-none d-lg-block">
                <ul class="list-group">
                  <li class="nav-item list-group-item border-0 p-0">
                    <!-- <div id="google_translate_element">CHANGE</div> -->

                    <span
                      class="text-sm text-f-Montserrat-Medium text-black ignore"
                      @click="setLang('english')"
                    >
                     <span class="icon flag english "></span> English</span
                    >
                    <!-- <a href="javascript: void(window.open('http://translate.google.com/translate?u='+escape(location.href)+'&amp;langpair=en%7Cde', 'English_to_German', 'resizable,scrollbars,status'))"> German</a> -->
                  </li>
                  <li class="mt-2 nav-item list-group-item border-0 p-0">
                    <span
                      class="text-sm text-f-Montserrat-Medium text-black ignore"
                      @click="setLang('spanish')"
                    >
                      <span class="icon flag spanish " ></span> ESPAÑOL</span
                    >
                  </li>
				  <li class="mt-2 nav-item list-group-item border-0 p-0">
				    <span
				      class="text-sm text-f-Montserrat-Medium text-black ignore"
				      @click="setLang('french')"
				    >
				      <span class="icon flag french" ></span> Français</span
				    >
				  </li>
                </ul>
              </div>
              <div class="row d-lg-none">
                <div class="col-md-12 g-0">
                  <!-- <a href="javascript: void(window.open('http://translate.google.com/translate?u='+escape(location.href)+'&amp;langpair=en%7Cde', 'English_to_German', 'resizable,scrollbars,status'))"> German</a> -->
                  <div
                    class="text-sm mb-2 ms-2 text-f-Montserrat-Medium text-black ignore"
                    @click="setLang('english')"
                  >
                    <span class="icon flag english "></span> English
                  </div>
                  <div
                    class="text-sm ms-2 text-f-Montserrat-Medium text-black ignore"
                    @click="setLang('spanish')"
                  >
                   <span class="icon flag spanish "></span> ESPAÑOL
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <!-- End Navbar -->
</template>
<style scoped>
.text-red {
  color: #ed1c24 !important;
}
.logo {
  height: 1.2rem;
  width: auto;
}
@media (max-width: 991.98px) {
  .logo {
    height: 0.9rem;
  }
}

@media (min-width: 992px) {
  .enstyle .navbar-nav .nav-link {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }
}
.dropdown.nav-item .dropdown-menu-animation.show {
  /* height: 116px; */
}
.dropdown.nav-item .dropdown-menu-animation.dropdown-menu-animation-1.show {
  height: 77px;
}
@media (min-width: 992px) {
    .dropdown .dropdown-menu:before {
        font-size: 0px;
    }
}
.nav-language {
	margin-top: 5px;
}
.flag{
	  width: 27px; 
	  height:14px;
	  background-size: cover; 
	  background-repeat: no-repeat; 
	  background-position: center; 
}
.english{
	 background-image: url('/src/assets/img/english-logo.a87f822e.png');
}
.spanish{
	background-image: url('/src/assets/img/spanish-logo.d14b7ffb.png');
}
.french{
	background-image: url('/src/assets/img/french-logo.e3ee5411.png');
}
@media (max-width: 991.98px) {
  .navbar.navbar-transparent .navbar-collapse.show .nav-link,
  .navbar.navbar-transparent .navbar-collapse.show i {
    color: #000;
  }
  .nav-language {
    color: #000 !important;
  }
}
@media (min-width: 1400px) {
  .container {
    max-width: 1400px;
  }
}
</style>
